<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图 -->
    <el-card>
        <!-- 添加角色按钮 -->
        <el-row>
            <el-col>
                <el-button type="primary">添加角色</el-button>
            </el-col>
        </el-row>
        <!-- 表格数据 -->
        <el-table
        :data="rolesList"
        border
        stripe
        style="width: 100%">
        <!-- 展开列 -->
        <el-table-column
        type="expand">
            <template slot-scope="scope">
                <el-card style="border-radius:0 !important">
                    <el-row v-for="item1 in scope.row.children" :key="item1.id">
                        <!-- 一级权限 -->
                        <el-col :span="5">
                            <el-tag
                            closable
                            @close="removeRightById(scope.row,item1.id)">
                                {{ item1.authName }}
                            </el-tag>
                            <i class="el-icon-caret-right"></i>
                        </el-col>
                        <!-- 二级、三级权限 -->
                        <el-col :span="19">
                            <el-row v-for="item2 in item1.children" :key="item2.id" class="row2">
                                <el-col :span="6">
                                    <el-tag type="success"
                                    closable
                                    @close="removeRightById(scope.row,item2.id)">
                                        {{ item2.authName }}
                                    </el-tag>
                                    <i class="el-icon-caret-right"></i>
                                </el-col>
                                <el-col :span="18">
                                    <el-tag closable 
                                    v-for="item3 in item2.children" :key="item3.id" 
                                    type="warning"
                                    @close="removeRightById(scope.row,item3.id)">
                                        {{ item3.authName }}
                                    </el-tag>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </template>
        </el-table-column>
        <el-table-column
        type="index">
        </el-table-column>
        <el-table-column
        prop="roleName"
        label="角色名称">
        </el-table-column>
        <el-table-column
        prop="roleDesc"
        label="角色描述">
        </el-table-column>
        <el-table-column
        label="操作"
        width="300">
            <template slot-scope="scope">
                <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                <el-button size="mini" type="warning" icon="el-icon-setting"
                @click="showSetRightDialog(scope.row)">分配权限</el-button>
            </template>
        </el-table-column>
    </el-table>
    </el-card>
    <!-- 分配权限对话框 -->
    <el-dialog
    title="分配权限"
    :visible.sync="setRightDialogVisible"
    width="50%"
    @close="setRightDialogClose()">
    <!-- 树形控件 -->
    <el-tree
    :data="rightsList"
    :props="treeProps"
    show-checkbox
    node-key="id" 
    default-expand-all
    :default-checked-keys="defaultKeys"
    ref="treeRef"
    >
    </el-tree>
    <span slot="footer" class="dialog-footer">
        <el-button @click="setRightDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="allotRights()">确 定</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
    name: 'RolesPage',
    data(){
        return{
            // 角色列表
            rolesList: [],
            // 分配权限对话框展示
            setRightDialogVisible: false,
            // 所有权限的数据
            rightsList: [],
            // 树形控件属性绑定对象
            treeProps: {
                // 展示的属性
                label: 'authName',
                // 嵌套所通过的属性
                children: 'children'
            },
            // 默认选中的属性id数组
            defaultKeys: [],
            // 分配权限的角色id
            roleId: ''
        }
    },
    created(){
        this.getRolesList()
    },
    methods: {
        async getRolesList(){
            const {data:res} = await this.$http.get('roles')
            if(res.meta.status !== 200) return this.$message.error('角色获取失败')
            this.rolesList = res.data
            console.log(this.rolesList)
        },
        removeRightById(role,rightId){
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err => {
                err
            }).then(res=>{
                if(res!=='confirm') return this.$message.info('已取消删除')
                this.$http.delete(`roles/${role.id}/rights/${rightId}`).then(result=>{
                    if(result.data.meta.status !== 200) return this.$message.error('删除失败')

                    // this.getRolesList()
                    // 避免页面重新渲染
                    role.children = result.data.data
                })
            })     
        },
        showSetRightDialog(role){
            this.roleId = role.id
            this.setRightDialogVisible = true
            this.$http.get('rights/tree').then(res=>{
                if(res.data.meta.status !== 200) return this.$message.error('获取权限失败')
                this.rightsList = res.data.data
                this.getLeafKeys(role,this.defaultKeys)
                console.log(this.rightsList)
            })
        },
        // 递归获取节点id
        getLeafKeys(node,arr){
            // 三级节点
            if(!node.children){
                return arr.push(node.id)
            }
            // 遍历此节点的子节点,直到没有子节点
            node.children.forEach(item => {
                this.getLeafKeys(item,arr)
            });
        },
        // 监听分配权限对话框关闭
        setRightDialogClose(){
            // 在关闭时清空树形控件数组
            this.defaultKeys = []
        },
        // 监听分配权限对话框确定
        async allotRights(){
            // getCheckedKeys返回目前被选中的节点的 key 所组成的数组
            // getHalfCheckedKeys返回目前半选中的节点的 key 所组成的数组
            const keys = [
                ...this.$refs.treeRef.getCheckedKeys(),
                ...this.$refs.treeRef.getHalfCheckedKeys()

            ]
            console.log(keys)
            // 让keys中的元素以','拼接
            const idStr = keys.join(',')
            const{data:res} = await this.$http.post(`roles/${this.roleId}/rights`,{rids: idStr})
            if(res.meta.status !== 200) return this.$message.error('更新权限失败')
            this.$message.success('更新权限成功')
            this.getRolesList()
            this.setRightDialogVisible = false
        }
    }
}
</script>

<style lang="less" scoped>
.el-tag{
    margin: 7px;
}
.el-table{
    .el-row{
        border-bottom: 1px solid #eee;
        display: flex;
        align-items: center;
    }
    .el-row:first-child{
        border-top: 1px solid #eee;
    }
    .row2{
        border-top: none !important;
    }
    .row2:last-child{
        border-bottom: none !important;
    }
}


</style>